<template>
  <div class="change_new">
    <h1>选择新起点</h1>
    <h3>我们希望为您提供更优质的服务</h3>
    <div class="topbg"></div>
    <div class="content">
      <div class="new same" @click="onOld(1)">
        <span class="first">NEW</span>
        <span class="second">您是新用户吗？</span>
        <van-icon name="arrow" class="third"/>
      </div>
      <div class="old same" @click="onOld(2)">
        <span class="first">OLD</span>
        <span class="second">您是老用户吗？</span>
        <van-icon name="arrow" class="third"/>
      </div>
    </div>
    <van-dialog v-model="isshow" title="手机验证" show-btnTitlecancel-button @confirm="onConfirm" @cancel="isshow = false">
      <div class="center">
        <van-field v-model="userphone" type="tel" label="手机号" placeholder="请输入手机号"/>
        <van-field v-model="usersms" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <van-button slot="button" size="small" type="info" :disabled="disabled" @click="onMessage">{{btnTitle}}</van-button>
        </van-field>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import { sendcode,oldphoneinfo } from '../api/api';
  import aestool from '@/utils/aestool.js';
  export default {
    name: "change_new",
    data(){
      return{
        value: '',
        show:false,
        showPicker: false,
        columns: ['新用户', '老用户'],
        userphone:'',
        usersms:'',
        btnTitle:"获取验证码",
        disabled:false,
        isshow:false,
        userinfo:''
      }
    },
    created(){
      this.userinfo = this.$route.query.info
      console.log('this.userinfo',this.userinfo)
    },
    methods:{
      //新老用户
      onOld(idx){
        if(idx == 1){ //新用户
          let toastload = this.$toast.loading({
            message: '加载中...',
            forbidClick: true
          });
          let str = this.getNum()
          let params = {
            types:aestool.encrypt('new',str),
            types_s:aestool.encrypt(str,'Oldphoneinfoqwe0'),
            wxinfo:this.userinfo,
          }
          oldphoneinfo(params).then(res=>{
            toastload.clear()
            if(res.Status == 200){
              sessionStorage.setItem('token',res.Data)
              this.$router.push('/uploadImg_new')
            }else{
              this.$toast(res.Message)
            }
          })
        }else if(idx == 2){ //老用户
          this.userphone = ''
          this.usersms = ''
          this.isshow = true
        }
      },
      //生成随机数
      getNum(){
        var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
        var nums=""
        for(var i=0;i<16;i++){
          var id = parseInt(Math.random()*61);
          nums+=chars[id];
        }
        return nums
      },
      //确认手机老用户
      onConfirm(){
        if(this.userphone == ''){
          this.$toast("手机号码不能为空")
        }else if(this.usersms == ''){
          this.$toast("手机验证码不能为空")
        }else{
          let toastload = this.$toast.loading({
            message: '加载中...',
            forbidClick: true
          });
          let str = this.getNum()
          let params = {
            types:aestool.encrypt('old',str),
            types_s:aestool.encrypt(str,'Oldphoneinfoqwe0'),
            wxinfo:this.userinfo,
            phone:aestool.encrypt(this.userphone,'Oldphoneinfoqwe0'),
            code:aestool.encrypt(this.usersms,'Oldphoneinfoqwe0')
          }
          oldphoneinfo(params).then(res=>{
            toastload.clear()
            if(res.Status == 200){
              sessionStorage.setItem('token',res.Data)
              this.$router.push('/home')
            }else{
              this.$toast(res.Message)
            }
          })
        }
      },
      //发送验证码
      onMessage(){
        //判断输入的手机号是否合法
        if(!this.userphone) {
          this.$toast("手机号码不能为空")
        } else if(!/^1[3456789]\d{9}$/.test(this.userphone)) {
          this.$toast("请输入正确的手机号")
        }else{
          //倒计时
          let time = 60;
          let timer = setInterval(() => {
            if(time == 0) {
              clearInterval(timer);
              this.disabled = false;
              this.btnTitle = "获取验证码";
            } else {
              this.btnTitle =time + '秒后重试';
              this.disabled = true;
              time--
            }
          },1000)
          let params = {
            phone:aestool.encrypt(this.userphone,'123456asdzxcqwe0')
          }
          sendcode(params).then(res=>{
            console.log('验证码',res)
            if(res.Status == 200){
              this.$toast('发送成功！')
            }else{
              this.$toast(res.Message)
            }
          })
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .change_new{
    font-size 12px
    padding 50px 16px 0
    h1{
      text-align center
      font-weight 100
    }
    h3{
      text-align center
      font-weight 100
      color #999999

    }
    .topbg{
      height 100px
      background url("../assets/img/old.png") top center no-repeat
      background-size cover
    }
    .content{
      border-radius 6px
      box-shadow 0px 1px 8px #eee
      padding 10px
      .new{
        .first{
          background #5698ec
        }
        .second{
          color #5698ec
        }
        border-bottom 1px solid #e0e0e0
      }
      .old{
        .first{
          background #eb5c56
        }
        .second{
          color #eb5c56
        }
      }
      .same{
        display flex
        justify-content space-around
        align-items center
        padding 20px 10px
        .first{
          width 60px
          height 60px
          border-radius 50%
          font-size 20px
          color #fff
          text-align center
          line-height 60px
        }
        .second{
          font-size 20px
        }
        .third{
          font-size 20px
          color #d2d2d2
        }
      }
    }
    /* .center{
       padding 20px 16px
       .btn{
         background #eec12f
         border-radius 20px
         line-height 38px
         margin 20px 0
         text-align center
         color #fff
       }
     }*/
  }
</style>
